<template>
  <div class="app-container">
    <div class="header">
      <h2>库存明细</h2>
      <div class="block">
        <span class="demonstration">操作时间: </span>
        <el-date-picker
          v-model="value"
          type="datetimerange"
          :picker-options="pickerOptions2"
          range-separator="至"
          start-placeholder="请选择"
          end-placeholder="请选择"
          align="right"
          :unlink-panels="unlinkPanels"
          @change="handleChange"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </div>
    </div>
    <div class="content">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        empty-text="无任何信息"
      >
        <el-table-column align="center" label="时间" width="250">
          <template slot-scope="scope">{{ scope.row.created_at }}</template>
        </el-table-column>
        <el-table-column label="类型" width="200" align="center">
          <template slot-scope="scope">{{ scope.row.type }}</template>
        </el-table-column>
        <el-table-column label="数量" align="center" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.count }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作人" width="200" align="center">
          <template slot-scope="scope">{{ scope.row.operator }}</template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="备注">
          <template slot-scope="scope">{{ scope.row.description }}</template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination :total="total" @submit="handleSubmit"></Pagination>
  </div>
</template>
<script>
import { getStores } from '@/api/table'
import Pagination from '@/views/pagination/pagination'
import {Message} from 'element-ui'
import { type } from 'os'
export default {
  data() {
    return {
      unlinkPanels: true,
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value: "",
      listLoading: false,
      list: [],
      total: 0,
      page: 1,
      timerObj: {}
    }
  },
  methods: {
    handleSubmit(val) {
      // console.log(val)
      this.page = val
      let params = Object.assign({}, this.timerObj, {page: this.page, part_id: this.$route.params.id})
      this.fetchData(params)
    },
    handleChange(timer) {
      this.listLoading = true
      let timerObj = {}
      // console.log(timer)
      if (timer instanceof Array) {
        timer.forEach((el, index) => {
          switch (index) {
            case 0 :
              timerObj.start = el
              break
            case 1 :
              timerObj.end = el
          }
        })
      }
      timerObj.part_id = this.$route.params.id
      this.timerObj = timerObj
      this.fetchData(this.timerObj)
      // console.log(timerObj)
    },
    fetchData(timerObj) {
      this.listLoading = true
      getStores(timerObj).then(response => {
        this.list = response.data.list
        this.listLoading = false
        this.total = response.data.total
      })
    }
  },
  created() {
    // console.log(this.formatTime())
    this.fetchData({page: this.page, part_id: this.$route.params.id})
    // console.log(this.$route)
  },
  components: {
    Pagination
  }
}
</script>
<style lang="scss" scoped>
.el-table{
  text-align: center;
}
.el-table /deep/ .el-table_1_column_2{
  text-align: center;
}
.app-container {
  .header {
    display: flex;
    justify-content: space-between;
    .block {
      padding-top: 13px;
      box-sizing: border-box;
    }
  }
}
</style>
